<template>
  <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px 5px' }">
      <div class="title">专题教程</div>
      <div class="content">
          <div class="cell" v-for="item in data.hotInfos" :key="item.id" @click="gotoInfoDetail(item.id)">
              <img :src="item.imgUrl" alt="">
              <p v-html="changeKey(item.title)"></p>
          </div>
      </div>
  </el-card>
</template>

<script setup>
import RankList from "./RankList.vue";
import { ref, computed, defineProps } from "vue";
import { gotoDetail } from "@/utils/action.js";
import { useRoute, useRouter } from "vue-router";
const router = useRouter()
const route = ref(useRoute());
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const activeName = ref('first');

const tabs = ref([
  {
    name: "页游",
    tjkey: "weekGames",
    hotkey: "totalGames",
  },
]);

const act = ref(tabs.value[0]);

const leftValue = computed(() => props.data[act.value.tjkey]);
const rightValue = computed(() => props.data[act.value.hotkey]);
const leftName = computed(() => act.value.name +'周排行榜');
const rightName = computed(() => act.value.name +'总排行榜');

const changeKey = (str)=>{
  let key = route.value.params.name
  return str.replace(key, "<span class='red'>"+key+'</span>');
}
const gotoInfoDetail = (id) => {
  router.push({
    name: "information-detail",
    params: { id: id },
  });
};
</script>

<style lang="less" scoped>
.title {
    margin: 0;
    padding: 0 15px;
    font-size: 20px;
    height: 51px;
    line-height: 51px;
    border-bottom: 1px solid #eee;
}
.content {
    display: flex;
    justify-content: space-between; /* 横向中间自动空间 */
    flex-wrap: wrap; /* 换行 */
    padding: 10px 8px 20px;
    .cell {
        display: inline-block;
        margin-top: 10px;
        width: 130px;
        cursor: pointer;
        img {
            width: 150px;
            height:100px;
            border-radius: 8px;
        }
        p {
            text-align: center;
            font-size: 14px;
            line-height: 14px;
            margin-top: 12px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }&:hover {
            img {
                opacity: 0.6;
            }
            p {
                color: @link-color;
            }
        }
    }
}
/deep/ .red{
  color: @theme-color;
}
</style>
